<template>
  <div class="t-editor">
    <editor :init="editorInit" v-model="editorContent" :key="tinymceFlag"></editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";

// tinymce插件
import "tinymce/plugins/link";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/code";

const URL = require('url');

export default {
  name: "TEditor",
  components: {
    editor: Editor,
  },
  data() {
    return {
      tinymceFlag: 1,
      editorContent: "<p><a href='https://www.baidu.com'>baidu.com</a></p>",
      debug: false,
      editorInit: {
        skin_url: "/tinymce/skins/ui/oxide",
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        menubar: false,
        plugins: ["link", "fullscreen", "image", "media", "code"],
        toolbar: [
          "undo redo italic underline bold image media link unlink",
          "forecolor backcolor",
          "alignleft aligncenter alignright alignjustify",
          "removeformat fullscreen",
        ],
        height: 300
      }
    };
  },
  mounted() {

    this.$nextTick(function() {
      const pageQuery = URL.parse(window.location.href, true).query
      this.debug = pageQuery.debug == 'true' ? true : false
      if (this.debug) this.editorInit.toolbar.push("code")
    })
  },
  activated() {
    this.tinymceFlag++;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
